<template>
  <transition
          mode="out-in"
          appear
          enter-active-class="animate__animated animate__bounceInUp"
          leave-active-class="animate__animated animate__bounceOutRight"
          name="fade" :duration="1800"
  >
      <div class="book_single" >
          <div class="book_single_img"
               :style="{backgroundImage:'url(' + bookData.imageUrl + ')',
        backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%'}"
          >
          </div>
          <div class="book_single_main">
              <div class="book_single_title">
                  {{ bookData.title }}
              </div>
              <div class="book_single_author">
                  {{ bookData.author }}
              </div>
              <div style="width: 200px;margin-top: 2%">
                  <el-rate style="margin-left: 5%;float: left" size="small" disabled v-model="bookData.score"/>
                  <!--<div style="float: right;margin-right: 20px;font-weight: bold;font-size: 20px;color: red">-->
                  <!--  ￥{{ bookData.price}}-->
                  <!--</div>-->
              </div>
          </div>
      </div>

  </transition>
</template>

<script setup>
import "animate.css"

import {ref} from 'vue'

const myProps = defineProps({
  bookData: {
    type: Object,
    default: {
      bookId: 1,
      title: '我是鲁滨逊',
      imageUrl: '',
      author: "鲁滨逊",
      score: 3
    }
  }
})

</script>

<style scoped>
.el-rate{
  --el-rate-icon-margin: 0px;
  --el-rate-icon-size: 18px;
  --el-rate-fill-color: red;
}
.book_single{
    width: 200px;
    height: 430px;
    display: inline-block;
    border: 2px solid #f6f1f1;
}
.book_single:hover{
    width: 200px;
    height: 430px;
    display: inline-block;
    border: 2px solid #e1d6d6;
    .book_single_title{
        font-weight: bold;
        font-size: 20px;
        margin-top: 2%;
        margin-left: 2%;
    }
    .book_single_author{
        font-size: 16px;
        margin-top: 2%;
        margin-left: 2%;
        color: #867f7f;
    }
}
.book_single_img{
    width: 200px;height: 310px
}
.book_single_main{
    background-color: white;
    width: 200px;
    height: 100px;
    display: flex;
    flex-flow: column;
}
.book_single_title{
    font-weight: bold;
    font-size: 15px;
    margin-top: 2%;
    margin-left: 2%;
}
.book_single_author{
    font-size: 13px;
    margin-top: 2%;
    margin-left: 2%;
    color: #867f7f;
}
</style>
